<template>
	<div class="SMS">
		<div class="allMask">
			<div class="SMS">
				<div class="SMS_top">
					手机验证 <image src="@/static/image/close.png" mode="" @click="CloseEvent"></image>
				</div>
				<div class="SMS_top_text">
					已向手机号 {{ rootMobile | rootMobileFilter }} 发送验证码
				</div>
				<div class="SMS_top_cont">
					<div class="SMS_top_cont_input">
						<input type="text" placeholder="请输入验证码" v-model="smsCode" placeholder-class="zj-placeholder-class">
					</div>
					<div :class="codeName == '发送验证码' ? 'SMS_top_cont_input_btn' : 'SMS_top_cont_input_btn SMS_top_cont_input_btn_act'"
						@click='SendCode'>
						{{ codeName }}
					</div>
					<div class="zj_red_from_right_error" v-if="isSMSStatus">
						{{ ErrorTitle }}
					</div>
				</div>
				<div class="SMS_top_btn" @click='sendRed()'>
					确定
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	filters: {
		rootMobileFilter(v) {
			const reg = /([0-9]{3})([0-9]{4})([0-9]{4})/g;
			return v.replace(reg, '$1****$3');
		}
	},
	props: {
		rootMobile: [String, Number],
		isSMSStatus: [Boolean, String]
	},
	data() {
		return {
			codeName: "发送验证码",
			totalTime: 60, //一般是60
			smsCode: '',
			codeShow: false,
			ErrorTitle: "验证码错误，请重新输入"
		}
	},
	onLoad() {

	},

	methods: {
		async getCode() {
			const {
				data
			} = await this.$request(this.$Api.redPacketSMS, {}, "post")
			if (data.code != 200) {
				this.codeShow = false
			}
		},
		async SendCode() {
			if (this.codeShow) return
			this.codeShow = true
			const {
				data
			} = await this.$request(this.$Api.redPacketCreateSMS, {
				mobile:this.rootMobile
			}, "post")
			if(data.code != 200) return
			this.getCode() //执行获取验证码
			this.codeName = '重新获取(' + this.totalTime + 's)'
			this.timer = setInterval(() => {
				this.totalTime--
				this.codeName = '重新获取(' + this.totalTime + 's)'
				if (this.totalTime < 0) {
					clearInterval(this.timer)
					this.codeName = '重发验证码'
					this.totalTime = 60
					this.codeShow = false
					this.isSend = false
				}
			}, 1000)
		},
		// 确认
		sendRed() {
			this.$emit('sendRed', this.smsCode)
		},
		// 关闭
		CloseEvent() {
			this.$emit('CloseEvent')
		}
	}
}
</script>

<style lang="scss">
.SMS {
	width: 652rpx;
	min-height: 430rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	position: fixed;
	left: 50%;
	top: 50%;
	margin-left: -321rpx;
	margin-top: -215rpx;
	padding: 28rpx 54rpx;

	.SMS_top {
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #1D2129;
		position: relative;

		image {
			position: absolute;
			right: -20rpx;
			top: 10rpx;
			width: 32rpx;
			height: 32rpx;
		}
	}

	.SMS_top_text {
		color: #464C5B;
		font-size: 28rpx;
		margin-top: 48rpx;
	}

	.SMS_top_cont {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 32rpx;
		position: relative;

		.SMS_top_cont_input {
			width: 324rpx;
			height: 76rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 2rpx solid #D7D7D7;
			padding: 16rpx;
		}

		.SMS_top_cont_input_btn {
			width: 200rpx;
			height: 72rpx;
			border-radius: 14rpx;
			border: 2rpx solid #295FFF;
			margin-left: 16rpx;
			font-size: 28rpx;
			color: #295EFF;
			text-align: center;
			line-height: 68rpx;
		}

		.SMS_top_cont_input_btn_act {
			width: 200rpx;
			height: 72rpx;
			border-radius: 14rpx;
			border: 2rpx solid #8C8C8C;
			opacity: 0.5;
			color: #8C8C8C;
		}
	}

	.SMS_top_btn {
		text-align: center;
		width: 276rpx;
		height: 76rpx;
		background: #295FFF;
		border-radius: 46rpx;
		line-height: 76rpx;
		font-size: 32rpx;
		color: #fff;
		margin: 48rpx auto;
	}

	.zj_red_from_right_error {
		font-size: 20rpx;
		color: #FF5A5F;
		position: absolute;
		bottom: -38rpx;
		left: 0;
	}
}</style>
